<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<view :class='indexId == index? "active":""'  @click="getIndex(index,item.id)" :key="item.id" v-for="(item,index) in cate">{{item.title}}</view>
	
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="item" v-for="item in sencondData" :key="item.id">
				<image @click="previewImg(item.img_url)" :src="item.img_url" mode=""></image>
				<text>{{item.title}}</text>
			</view>
			<text v-if="sencondData.length===0">暂无数据</text>
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cate:[],
				indexId:0,
				sencondData:[]
			}
		},
		methods: {
		async	getPicscate(){
			const res  =  await	this.$myRequest({
					url: '/api/getimgcategory'
				})
				// console.log(res)
			this.cate = res.data.message
			this.getIndex(0,this.cate[0].id)
			},
		async	getIndex(index,id){
				this.indexId = index
				// 获取右侧的数据
				const res = await this.$myRequest ({
					url: '/api/getimages/'+id
				})
				this.sencondData = res.data.message
				
			},
			previewImg(current){
				const urls = this.sencondData.map(item=>{
					return item.img_url
				})
				uni.previewImage({
					current,
					urls
				})
			}
		},
		onLoad() {
			this.getPicscate()
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
  .pics {
	  height: 100%;
	  display: flex;
  }
  .left{
	  width: 200rpx;
	  height: 100%;
	  border-right: 1px solid #eee;
	  view {
		  height: 60px;
		  line-height: 60px;
		  color: #333;
		  text-align: center;
		  font-size: 30rpx;
		  border-top: 1px solid #eee;
	  }
	  .active {
		  background: $shop_color;
		  color: #fff;
	  }
	  .right {
		  height: 100%;
		  width: 520rpx;
		  margin: 10rpx auto;
		  .item {
			  image {
				  width: 520rpx;
				  height: 520rpx;
				  border-radius: 5px;
			  }
		  }
	  }
  }
</style>
